{{ header }}
<div id="latest" class="latestMore">
    <div class="product-header">
        <h2>{{ heading_title }}</h2>
        <a href="{{ home }}" class="back"><i class="iconfont icon-flow"></i></a>
    </div>
    <div class="product-content new-product">
        {% set index = 0 %}
        {% for product in products %}
            {% set index = index + 1 %}
            <div class="product-layout">
                <div class="product-thumb transition">
                    <div class="image">
                        {% if saveoff %}
                            <div class="discount">
                                <span class="discount-num">{{ saveoff }}</span>
                                <span class="discount-text">折</span>
                            </div>
                        {% endif %}
                        <a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive"/></a>
                    </div>
                    <div class="caption">
                        <h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
                        {% if product.price %}
                            <p class="price">
                                {% if not product.special %}
                                    {{ product.price }}
                                {% else %}
                                    <span class="price-old">{{ product.price }}</span>
                                    <span class="price-new">{{ product.special }}</span>
                                {% endif %}
                            </p>
                        {% endif %}
                        <div class="like">
                            <div class="praise" onclick="praiseClick(this)" data-rel="{{ product.product_id }}" data-rev="{{ product.product_id }}"><i
                                        class="iconfont icon-zan"></i>{{ product.praise }}</div>
                            <div>
                                {% if product.rating %}
                                    <div class="rating stars">
                                        {% for i in 1..5 %}
                                            {% if product.rating < i %}
                                                <span class="star fa fa-stack">
                                                <i class="star fa fa-star-o fa-stack-2x"></i>
                                            </span>
                                            {% else %}
                                                <span class="star fa fa-stack">
                                                <i class="star fa fa-star fa-stack-2x"></i>
                                                <i class="star fa fa-star-o fa-stack-2x"></i></span>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                {% endif %}
                                {% if product.reviews %}
                                    ({{ product.reviews }})
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {#{% if index%2 == 0 %}#}
            {#<div class="product-layout"></div>#}
            {#{% endif %}#}
        {% endfor %}
    </div>
</div>


<script>


    function praiseClick (_this) {

        var product_id = _this.dataset.rel; //获取HTML页面POST过来的article_id

        var cat_id = _this.dataset.rev; //获取HTML页面POST过来的cat_id

        $.ajax({

            type: "POST",

            url: "{{ praiseurl }}",

            data: "product_id=" + product_id + "&cat_id=" + cat_id,//数据拼接

            cache: false, //不缓存此页面

            success: function (data) {
                if (data.mesage == '點贊成功') {
                    $(_this).html('<i class="iconfont icon-zan"></i>' + data.num); //显示data并局部刷新
                    alert(data.mesage);
                } else {

                    alert(data.mesage);
                }


            },
            error: function () {

                alert("error");

            }

        });

    };


</script>